<template>
      <!--顶部导航栏 start-->
  <ExamMenu />
  <!--顶部导航栏 end-->
    <div class="online-exam-container">
      <!-- 主标题 -->
      <transition name="title-slide">
        <h1 class="main-title">
          <el-icon><Monitor /></el-icon>
          线上考试规范要求
        </h1>
      </transition>
  
      <!-- 规范内容容器 -->
      <div class="spec-container">
        <!-- 考前准备 -->
        <transition name="card-slide">
          <el-card class="spec-card">
            <template #header>
              <div class="card-header">
                <el-icon><Setting /></el-icon>
                <span>考前准备</span>
                <el-tag type="success">必须完成</el-tag>
              </div>
            </template>
  
            <div class="card-content">
              <h3 class="section-title"><el-icon><VideoCamera /></el-icon> 设备要求</h3>
              <ul class="spec-list">
                <li v-for="(item, index) in deviceRequirements" :key="index">
                  <el-icon><ArrowRight /></el-icon>
                  {{ item }}
                </li>
              </ul>
  
              <h3 class="section-title"><el-icon><Connection /></el-icon> 网络要求</h3>
              <el-alert 
                :title="networkRequirement" 
                type="info"
                :closable="false"
                class="custom-alert"
              />
  
              <h3 class="section-title"><el-icon><OfficeBuilding /></el-icon> 环境要求</h3>
              <div class="environment-grid">
                <div 
                  v-for="(item, index) in environmentRequirements"
                  :key="index"
                  class="environment-item"
                >
                  <el-icon :class="item.icon" />
                  <span>{{ item.text }}</span>
                </div>
              </div>
            </div>
          </el-card>
        </transition>
  
        <!-- 考试纪律 -->
        <transition name="card-slide">
          <el-card class="spec-card">
            <template #header>
              <div class="card-header">
                <el-icon><Document /></el-icon>
                <span>考试纪律</span>
                <el-tag type="danger">严格监控</el-tag>
              </div>
            </template>
  
            <div class="card-content">
              <div class="discipline-grid">
                <div 
                  v-for="(item, index) in disciplines"
                  :key="index"
                  class="discipline-item"
                  :style="{ borderColor: item.color }"
                >
                  <el-icon :class="item.icon" />
                  <h4>{{ item.title }}</h4>
                  <p>{{ item.content }}</p>
                </div>
              </div>
  
              <el-alert
                title="违规行为将触发AI自动记录"
                type="warning"
                :closable="false"
                class="warning-alert"
              />
            </div>
          </el-card>
        </transition>
  
        <!-- 确认按钮 -->
        <transition name="button-scale">
          <div class="action-box">
            <el-button 
              type="primary" 
              class="confirm-btn"
              @click="handleConfirm"
            >
              <el-icon><Finished /></el-icon>
              我已阅读并同意遵守以上规定
            </el-button>
          </div>
        </transition>
      </div>
    </div>
    <!--底部 start-->
  <ExamFooter />
  <!--底部 end-->
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue'
  import { ElMessage } from 'element-plus'
  import ExamFooter from '@/components/comm/ExamFooter.vue';
  import ExamMenu from '@/components/comm/ExamMenu.vue';
  import {
    Monitor,
    Setting,
    VideoCamera,
    Connection,
    OfficeBuilding,
    Document,
    Finished,
    ArrowRight
  } from '@element-plus/icons-vue'
  
  const deviceRequirements = ref([
    '双机位配置：带摄像头电脑+智能手机',
    '操作系统：Windows 10/macOS 10.15或更新',
    '浏览器：Chrome 90+/Edge 90+（禁用弹窗拦截）'
  ])
  
  const networkRequirement = ref('稳定网络环境：下行≥10Mbps，上行≥5Mbps，建议准备4G/5G备用热点')
  
  const environmentRequirements = ref([
    { icon: 'icon-lock', text: '独立封闭空间' },
    { icon: 'icon-light', text: '光线充足均匀' },
    { icon: 'icon-clean', text: '背景简洁无杂物' },
    { icon: 'icon-silent', text: '安静无干扰环境' }
  ])
  
  const disciplines = ref([
    {
      title: '身份验证',
      content: '开考前完成人脸识别+证件比对',
      icon: 'User',
      color: '#409EFF'
    },
    {
      title: '行为规范',
      content: '禁止离开监控范围/使用通讯设备',
      icon: 'Warning',
      color: '#e6a23c'
    },
    {
      title: '答题要求',
      content: '全程使用系统内置答题界面',
      icon: 'Edit',
      color: '#67c23a'
    },
    {
      title: '监控要求',
      content: '全程开启摄像头和屏幕共享',
      icon: 'Camera',
      color: '#f56c6c'
    }
  ])
  
  const handleConfirm = () => {
    ElMessage.success({
      message: '承诺已确认，祝您考试顺利！',
      duration: 3000,
      showClose: true
    })
  }
  </script>
  
  <style lang="scss" scoped>
  // 主题色定义
  @use '@/assets/scss/variables' as *;
 
  // 动画定义
  @keyframes slideIn {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .title-slide-enter-active {
    animation: slideIn 0.8s ease-out;
  }
  
  .card-slide-enter-active {
    animation: slideIn 0.6s ease-out;
    &:nth-child(2) { animation-delay: 0.2s; }
    &:nth-child(3) { animation-delay: 0.4s; }
  }
  
  .button-scale-enter-active {
    animation: scaleIn 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  }
  
  @keyframes scaleIn {
    from { transform: scale(0); }
    to { transform: scale(1); }
  }
  
  .online-exam-container {
    min-height: 100vh;
    padding: 40px 20px;
    background: linear-gradient(150deg, lighten($primary-color, 42%), #f8f9fa);
  
    .main-title {
      text-align: center;
      color: $primary-color;
      margin-bottom: 40px;
      font-size: 2.4em;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      text-shadow: 2px 2px 4px rgba($primary-color, 0.1);
  
      .el-icon {
        font-size: 1.2em;
      }
    }
  
    .spec-container {
      max-width: 1000px;
      margin: 0 auto;
    }
  
    .spec-card {
      margin-bottom: 30px;
      transition: transform 0.3s, box-shadow 0.3s;
      border-radius: 12px;
  
      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba($primary-color, 0.15);
      }
  
      .card-header {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 1.2em;
        color: $primary-color;
  
        .el-icon {
          font-size: 1.4em;
        }
  
        .el-tag {
          margin-left: auto;
        }
      }
  
      .card-content {
        padding: 20px;
  
        .section-title {
          color: $primary-color;
          margin: 20px 0 15px;
          display: flex;
          align-items: center;
          gap: 8px;
  
          .el-icon {
            font-size: 1.2em;
          }
        }
  
        .spec-list {
          padding-left: 20px;
          li {
            margin: 12px 0;
            padding: 10px;
            background: rgba($primary-color, 0.05);
            border-radius: 6px;
            transition: all 0.3s;
  
            &:hover {
              background: rgba($primary-color, 0.1);
              transform: translateX(8px);
            }
  
            .el-icon {
              color: $primary-color;
              margin-right: 8px;
            }
          }
        }
  
        .custom-alert {
          margin: 15px 0;
          border: 1px solid rgba($primary-color, 0.2);
          background: rgba($primary-color, 0.05);
        }
  
        .environment-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: 20px;
          margin-top: 15px;
  
          .environment-item {
            padding: 20px;
            background: white;
            border-radius: 8px;
            text-align: center;
            box-shadow: 0 3px 8px rgba(0,0,0,0.1);
            transition: transform 0.3s;
  
            &:hover {
              transform: translateY(-3px);
            }
  
            .el-icon {
              font-size: 2em;
              color: $primary-color;
              margin-bottom: 10px;
            }
  
            span {
              display: block;
              color: #666;
            }
          }
        }
  
        .discipline-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
          gap: 20px;
          margin: 20px 0;
  
          .discipline-item {
            padding: 20px;
            border-left: 4px solid;
            background: white;
            border-radius: 6px;
            transition: all 0.3s;
  
            &:hover {
              box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            }
  
            .el-icon {
              font-size: 1.8em;
              margin-bottom: 10px;
            }
  
            h4 {
              margin: 10px 0;
              color: #333;
            }
  
            p {
              color: #666;
              font-size: 0.95em;
              line-height: 1.6;
            }
          }
        }
  
        .warning-alert {
          background: rgba($warning-color, 0.1);
          border: 1px solid rgba($warning-color, 0.2);
          color: darken($warning-color, 15%);
        }
      }
    }
  
    .action-box {
      text-align: center;
      margin-top: 40px;
  
      .confirm-btn {
        padding: 18px 50px;
        font-size: 1.1em;
        letter-spacing: 1px;
        background: linear-gradient(45deg, $primary-color, darken($primary-color, 8%));
        border: none;
        transition: all 0.3s;
  
        &:hover {
          background: linear-gradient(45deg, darken($primary-color, 5%), darken($primary-color, 12%));
          transform: scale(1.05) rotate(-1deg);
          box-shadow: 0 5px 15px rgba($primary-color, 0.3);
        }
  
        .el-icon {
          margin-right: 10px;
          font-size: 1.2em;
        }
      }
    }
  }
  </style>